<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>第一个Vue程序</title>
		<!-- 安装Vue，当使用script进行安装后，上下文中注册了全局变量:Vue -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			/*
			 对于构造函数需创建Vue实例，不能直接调用否则报错
			 其中传入的参数为option，要求必须是一个纯粹JS对象:{}
			 在这个{}对象中可以编写大量的key:value对
			 一个对就是一个配置项，template为其中一个
			 template用来将字符串形式的模版语句(即HTML代码或Vue中的特殊规则)编译转换成视图(即浏览器可识别的HTML代码)
			*/
			let options = {
				template: "<h1>Hello Vue!</h1>",
			};
			const myVue = new Vue(options);
			/*
			 Vue实例都有$mount方法，作用是将实例挂载在指定位置
			 下面将实例挂载到了id="app"的元素中
			 #app显然是id选择器，这个语法借鉴CSS，因此也可以放其他选择器
			*/
			myVue.$mount("#app");
			// 甚至可以这么写(重复挂载同一实例会覆盖前面的)
			myVue.$mount(document.getElementById("app"));
		</script>
	</body>
</html>
